<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <script type="text/javascript">
        function goPage(pageNo){
            //1:获取表单对象
            var form = document.forms[0];
            form.currentPage.value = pageNo;
            form.submit();
        }
    </script>

</head>
<body>
<h1>员工列表</h1>
<a href="/employee/input">添加</a>
<form action="/employee/list" method="post">
    <table border="1" cellpadding="0" cellspacing="0" width="60%">
        <tr>
            <td colspan="7">
                关键字:<input type="text" name="keyword" th:value="${qo.keyword}">
                部门:<select name="deptId">
                <option value="">全部</option>
                <option th:each="department:${departments}"
                    th:value="${department.id}"
                    th:text="${department.name}"
                    th:selected="${department.id == qo.deptId}">
                </option>
            </select>
                <input type="submit" value="查询"/>
            </td>
        </tr>
        <tr>
            <td>编号</td>
            <td>名称</td>
            <td>姓名</td>
            <td>email</td>
            <td>年龄</td>
            <td>是否管理员</td>
            <td>部门名称</td>
            <td>操作</td>
        </tr>
        <tr th:each="employee:${pageResult.data}">
            <td th:text="${employee.id}"></td>
            <td th:text="${employee.username}"></td>
            <td th:text="${employee.name}"></td>
            <td th:text="${employee.email}"></td>
            <td th:text="${employee.age}"></td>
            <td th:text="${employee.admin ? '是':'否'}"></td>
            <td th:text="${employee.dept?.name}"></td>
            <td>
                <a th:href="|/employee/input?id=${employee.id}|">修改</a>
                <a th:href="|/employee/delete?id=${employee.id}|">删除</a>
            </td>
            </tr>
        <tr>
            <td colspan="7" align="center">
                <a href="javascript:;" onclick="goPage(1)">首页</a>
                <a href="javascript:;" th:onclick="|goPage(${pageResult.prevPage})|">上一页</a>
                <a href="javascript:;" th:onclick="|goPage(${pageResult.nextPage})|">下一页</a>
                <a href="javascript:;" th:onclick="|goPage(${pageResult.totalPage})|">末页</a>
                每页显示:<select name="pageSize" onchange="goPage(1)">
                <option value ="3" th:selected="${pageResult.pageSize == 3}" >3</option>
                <option value ="5"  th:selected="${pageResult.pageSize == 5}"}>5</option>
                <option value ="10" th:selected="${pageResult.pageSize == 10}"}>10</option>
            </select>
                <span th:text="${pageResult.currentPage }"></span> / <span th:text="${pageResult.totalPage }"></span>页
                跳转:<input type="text" name="currentPage" style="width: 30px" th:value="${pageResult.currentPage}">
                <input type="submit" value="GO"/>
            </td>
        </tr>
    </table>

</form>



</body>
</html>